<template>
  <uni-nav-bar :title="title+'奖'" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="animation-slide-right">
    <view class="direction-start" style="background-color: #39A8FF;color:#fff;padding:30rpx;box-sizing: border-box;">
      <view>{{name}}(元)</view>
      <view style="margin-top: 5rpx;font-size: 48rpx;">{{money}}</view>
    </view>
    <!--    <view class="package_sale" style="padding:15rpx;">
      <view class="space-between">
        <view class="datas" style="width:78%;">
          <uni-datetime-picker v-model="range" type="daterange" :border="false" :clear-icon="false" rangeSeparator="至"
            @change="change" />
        </view>
        <hpy-form-select :dataList="ScreenList" text="name" name="value" @change="consolu($event)" :title="ScreenName"
          :Text="ScreenName" :icon='true' />
      </view>
      <view class="center"><text>总加注量：800.00 </text><text>奖金：80.58</text></view>
    </view> -->
    <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
      :style="{ height:pageHeight + 'px'}">
      <view class="package_sale" style="padding: 10rpx 30rpx;margin: 0px;" v-if="orderLists.length>0">
        <view v-for="item in orderLists" :key='item.id' @click="show==item.id?show=0:show=item.id">
          <view class="space-between lis">
            <view class="direction-start">
              <view class="center">{{item.memo}}<uni-icons type="top" size="20"
                  :style="{transform:show==item.id?'rotate(180deg)':'rotate(0deg)',marginLeft:'10rpx'}"
                  v-if="item.json&&item.json.length>0"></uni-icons>
              </view>
              <view style="font-size: 26rpx;color: #666;margin-top: 6rpx;">{{item.createtime}}</view>
            </view>
            <view>
              <view>{{item.money}}</view>
            </view>
          </view>
          <view class="detail space-between" v-if="show==item.id&&item.json&&item.json.length>0">
            <view v-for="items in item.json" style="width:50%;color:#666;font-size: 26rpx;margin-top:5rpx;">{{items.name}} : {{items.value}}</view>
          </view>
        </view>
      </view>
      <Popu v-else :pageHeight="pageHeight" text="暂无奖励明细"></Popu>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { navBack } from '@/utils/navigator';
  import { onLoad } from '@dcloudio/uni-app';
  import { getWagesLog } from '@/gql/earthPushing/attendance';
  import Popu from '@c/earthPushing/common/popu.vue';
  // import { format, subDays } from 'date-fns';
  import { toPublish } from '@mqtt';
  import { showLoading } from '@/utils/prompt';
  import { getDriverID } from '@/stores/driverID';
  const staff_id = getDriverID();

  // const ScreenList = ref([{ name: '福利品', value: 1 },
  // { name: '新用户', value: 1 },
  // { name: '次新用户', value: 1 },
  // { name: ' 老用户', value: 1 },
  // { name: '大客户', value: 1 }])
  // const ScreenName = ref('筛选')

  const type = ref('')
  const name = ref('')
  const money = ref('')
  const title = ref('')
  const month = ref('')

  // data
  // const now = new Date();
  // let end = format(now, 'yyyy-MM-dd');
  // const daysAgo = subDays(now, 6);
  // let start = format(daysAgo, 'yyyy-MM-dd');
  // const range = ref([start, end]);
  const show = ref(0)

  const orderLists = ref([]);
  const isLoading = ref(false);
  const lastPage = ref(1);
  const currentPage = ref(1);
  const pageHeight = ref();
  uni.getSystemInfo({
    success: function (res) {
      pageHeight.value = res.windowHeight - 150;
    },
  });
  onLoad((pearm) => {
    title.value = pearm.title
    money.value = pearm.money
    type.value = pearm.type
    name.value = pearm.name
    month.value = pearm.month
    init()
  })
  function init() {
    showLoading()
    isLoading.value = true;
    const payload = {
      query: getWagesLog,
      variables: {
        page: currentPage.value,
        staff_id,
        type: type.value,
        month: month.value
      },
    };
    toPublish(
      'ql/staff/getWagesLog',
      payload,
      (obj : any) => {
        const { getWagesLog } = obj.data;
        isLoading.value = false;
        orderLists.value = [...orderLists.value, ...getWagesLog.list];
        lastPage.value = getWagesLog.lastpage;
      },
    );
  }
  /**
   * 加载更多
   */
  function loadMore() {
    if (currentPage.value < lastPage.value) {
      currentPage.value++;
      init()
    }
  }

  // function change([sta, en]) {
  //   currentPage.value = 1;
  //   orderLists.value = [];
  //   start = sta;
  //   end = en;
  //   init();
  // }

  // function consolu(e : any) {
  //   ScreenName.value = e.data.name
  // }
</script>

<style scoped lang="less">
  .lis:nth-last-of-type(1) {
    border: none;
  }

  .lis {
    border-bottom: 1px solid #eee;
    padding: 20rpx 0px;
    box-sizing: border-box;
  }

  .order {
    display: flex;
    align-items: center;
    padding: 2px 20rpx;
    box-sizing: border-box;
    margin-left: 20rpx;
    background-color: #eee;
    border-radius: 30rpx;
  }

  .detail {
    width: 100%;
    background-color: #eee;
    border-radius: 5px;
    padding:10rpx 20rpx;
    box-sizing: border-box;
    flex-wrap: wrap;
  }
</style>
<style>
  .datas>>>.uni-date__x-input {
    font-size: 30rpx !important;
  }

  .datas>>>.uni-date-x {
    font-size: 30rpx !important;
    padding: 0px;
  }

  .datas>>>.uni-icons {
    font-size: 48rpx !important;
  }

  .space-between>>>.select-picker {
    font-size: 26rpx !important;
    padding: 0px;
  }
</style>